<template>
  <div id="app">
    <div id="admin">
      <div class="pos" >
        <h1 class="adminh1">管理员登录</h1>
        <el-form :model="admin" status-icon  
         ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
           <el-form-item label="用户名" >
          <el-input prefix-icon="el-icon-user" v-model="admin.aname" autocomplete="off"  style="width: 250px"></el-input>
        </el-form-item>
           <el-form-item label="密码">
          <el-input  prefix-icon="el-icon-menu" v-model="admin.apwd" autocomplete="off"
           style="width: 250px" type="password"></el-input>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login()"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script >
const axios = require("axios");
axios.defaults.baseURL = '/api/'
export default {
    data() {
      return{
        admin:{}
      }
    },
    props:[],
    components: {},
    created() {
    },
    mounted() {
      
    },
    methods:{
      login(){
        axios({
        method: 'GET',
        url: '/admin/adminLogin',
        params:this.admin
      })
        .then((res) => {
          if(res.data.status==0){
            this.$message.success("登录成功");
            sessionStorage.setItem("admin", JSON.stringify(this.admin));
            localStorage.setItem('userName',this.admin.aname);
            this.$router.push({
              path:"/home",
              query:{
                name:this.admin.aname
              }
          })
          }else{
            this.$message.info(res.data.message)
          }
         
        })
      }
    }
  };
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
.el-input__icon {
    height: 100%;
    width: 0px;
    text-align: center;
    transition: all .3s;
    line-height: 40px;
}
.el-button--primary:focus, .el-button--primary:hover {
    background: #108908;
    border-color: #379507;
    color: #e6e8e7;
}
.el-button--primary {
    color: #ece5e5;
    background-color: #128936;
    border-color: #228b0e;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

}
#app::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  filter: blur(5px);
  background-image:url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F019f725e7360b0a801216518ad2c92.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657359946&t=e990d9b8d53bf5b731030330db62b141');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
#admin {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 500px;
  height: 400px;
  box-shadow: 0px 0px 100px #627660;
  /* border: 1px solid hsla(0, 0%, 37%, 0.502); */
  border-radius: 10%;
  transition: .3s ease-in-out;
}

#admin:hover {
  box-shadow: 0px 0px 20px #677866;
}

.adminh1 {
  margin: 20px 0;
  text-align: center;
}
.pos {
  width: 450px;
  height: 350px;
  position: absolute;
  top: 25px;
  left: 25px;
}
</style>
